<template>
    <!-- 菜单 -->
    <li class="menu-item sc-f" :class="getItemClassName()">
        <slot></slot>
        <svg-icon
            class="icon-dis"
            icon-class="icon_dis"
            v-if="disabled"
        ></svg-icon>
    </li>
</template>

<script>
/** 文件夹右键菜单 */
export default {
    name: "ContextMenuItem",
    props: {
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        getItemClassName() {
            return {
                disabled: this.disabled,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
.menu-item {
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    height: 24px;
    border-radius: 4px;
    white-space: nowrap;

    --fontcolor: #adb1c2;
    --hoverfontcolor: #ffffff;
    /** 因为组件vue-context底层用了important,所以全都要用 */
    padding: 0.5rem 1.5rem;
    color: var(--fontcolor) !important;
    span,
    i {
        color: var(--fontcolor) !important;
    }
    // 聚焦的状态
    &:hover,
    &:focus {
        background-color: #00a289;
        color: var(--hoverfontcolor) !important;
        cursor: pointer;
        ::v-deep span,
        i {
            color: var(--hoverfontcolor) !important;
        }
    }

    &.disabled {
        --fontcolor: #545764;
        --hoverfontcolor: #545764;
        &:hover,
        &:focus {
            background-color: transparent;
            cursor: not-allowed;
        }
    }
}
</style>
